<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="網頁設計,平面設計,插畫" />
        <meta name="description" content="DFUNS個人網站與美工網頁設計教學,CSS,FLASH" />
        <meta name="copyright" content="本網頁著作權 DFUNS 2000-2010 All Rights Reserved."/>
        <meta name="author" content="DFUNS by Away" />
        <title>=DFUNS™= CSS語法教學-兩欄式排版</title>

        <style type="text/css" >
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 10pt;
                /*border:1px #F00 dashed;*/
            }
            #wrapper {
                width: 780px;
                margin-right: auto;
                margin-left: auto;
                background-image: url(images/wrapper.gif);
                background-repeat: repeat-y;
                padding-right: 10px;
                padding-left: 10px;
                /*border:1px #F00 dashed;*/
            }
            #wrapper #header {
                height: 100px;
                background-image: url(images/header.gif);
            }
            #wrapper #header h1 {
                height: 100px;
                width: 780px;
                text-indent: -9999px;
                cursor: pointer;
                /*border:1px #F00 dashed;*/
            }
            #wrapper #mainMenu {
                height: 35px;
                background-image: url(images/mainMenu_bg.gif);
                background-repeat: repeat-x;
                margin-bottom: 15px;
                margin-top: -5px;
            }
            #wrapper #mainMenu ul {
                padding: 0px;
                list-style-type: none;
                width: 700px;
                margin-top: 0px;
                margin-right: auto;
                margin-bottom: 0px;
                margin-left: auto;
                height: 35px;
                /*border:1px #F00 dashed;*/
            }
            #wrapper #mainMenu ul li {
                float: left;
                height: 30px;
                background-image: url(images/mainMenu_link.png);
                /*border:1px #F00 dashed;*/
            }
            #wrapper #mainMenu ul li a {
                display: block;
                height: 22px;
                width: 100px;
                text-align: center;
                padding-top: 13px;
                text-indent: -9999px;
            }
            #wrapper #mainMenu ul #about  {
                background-position: 0px 0px;
            }
            #wrapper #mainMenu ul #design  {
                background-position: -100px 0px;
            }
            #wrapper #mainMenu ul #webDesign  {
                background-position: -200px 0px;
            }
            #wrapper #mainMenu ul #teach  {
                background-position: -300px 0px;
            }
            #wrapper #mainMenu ul #music  {
                background-position: -400px 0px;
            }
            #wrapper #mainMenu ul #link  {
                background-position: -500px 0px;
            }
            #wrapper #mainMenu ul #contact  {
                background-position: -600px 0px;
            }

            #wrapper #mainMenu ul #about a:hover {
                background-position: 0px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #design a:hover {
                background-position: -100px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #webDesign a:hover {
                background-position: -200px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #teach a:hover {
                background-position: -300px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #music a:hover {
                background-position: -400px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #link a:hover {
                background-position: -500px -35px;
                background-image: url(images/mainMenu_link.png);
            }
            #wrapper #mainMenu ul #contact a:hover {
                background-position: -600px -35px;
                background-image: url(images/mainMenu_link.png);
            }

            #wrapper #subMenu {
                width: 190px;
                float: left;
                margin-right: 10px;
            }
            #wrapper #subMenu h1 {
                background-color: #F00;
                font-size: 1.4em;
                color: #FFF;
                width: 170px;
                float: right;
                text-align: center;
                height: 27px;
                background-image: url(images/subMenu_h1.gif);
                background-repeat: no-repeat;
                padding-top: 3px;
                /*border:1px #F00 dashed;*/
            }
            #wrapper #subMenu ul {
                list-style-type: none;
                width: 170px;
                float: right;
            }
            #wrapper #subMenu ul li {
                border-bottom-width: 1px;
                border-bottom-style: dashed;
                border-bottom-color: #CCC;
                /*border-bottom-color: red;*/
                height: 30px;
                margin-top: 2px;
                padding-bottom: 2px;
            }
            #wrapper #subMenu ul li a {
                height: 30px;
                width: 170px;
                display: block;
                text-indent: -9999px;
            }
            #wrapper #subMenu ul #dw {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px 0px;
            }
            #wrapper #subMenu ul #fl {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -30px;
            }
            #wrapper #subMenu ul #fw {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -60px;
            }
            #wrapper #subMenu ul #ps {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -90px;
            }
            #wrapper #subMenu ul #ai {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -120px;
            }
            #wrapper #subMenu ul #ind {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -150px;
            }
            #wrapper #subMenu ul #cdr {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -180px;
            }
            #wrapper #subMenu ul #ufo {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -210px;
            }
            #wrapper #subMenu ul #rif {
                background-image: url(images/subMenu_bg.jpg);
                background-position: 0px -240px;
            }

            #wrapper #subMenu ul #dw a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px 0px;
            }
            #wrapper #subMenu ul #fl a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -30px;
            }
            #wrapper #subMenu ul #fw a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -60px;
            }
            #wrapper #subMenu ul #ps a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -90px;
            }
            #wrapper #subMenu ul #ai a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -120px;
            }
            #wrapper #subMenu ul #ind a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -150px;
            }
            #wrapper #subMenu ul #cdr a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -180px;
            }
            #wrapper #subMenu ul #ufo a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -210px;
            }
            #wrapper #subMenu ul #rif a:hover {
                background-image: url(images/subMenu_bg.jpg);
                background-position: -170px -240px;
            }
         
            #wrapper  #text  ul {
                list-style-type: none;
                float: right;
                width: 96px;
                padding-right: 15px;
                /*border:1px #F00 dashed;*/
            }
            #wrapper  #text  li {
                height: 17px;
                float: left;
                text-align: center;
                padding-top: 3px;
                cursor: pointer;
                width: 20px;
                margin-right: 5px;
                margin-left: 5px;
                border: 1px solid #CCCCCC;
                color: #CCCCCC;
                display: inline;
            }
            #wrapper #content {
                width: 575px;
                float: right;
            }
            #wrapper #content h1 {
                text-align: center;
                width: 555px;
                font-size: 2.5em;
                color: #900;
            }
            #wrapper #content h2 {
                margin-left: 10px;
                margin-top: 10px;
                color: #F90;
                font-size: 1.4em;
            }
            #wrapper #content p {
                margin-left: 20px;
                margin-right: 20px;
                line-height: 1.5em;
                margin-top: 5px;
                margin-bottom: 1.5em;
            }
            #wrapper #footer {
                clear: both;
                height: 60px;
                padding-left: 10px;
                color: #FFF;
                padding-top: 10px;
                background-color: #999;
            }
            #wrapper #footer h1 {
                font-size: 1.5em;
                margin-bottom: 5px;
                /*border:1px #F00 dashed;*/
            }

        </style>
        <script type="text/javascript">
            function MM_changeProp(objId, x, theProp, theValue) { //v9.0
                var obj = null;
                with (document) {
                    if (getElementById)
                        obj = getElementById(objId);
                }
                if (obj) {
                    if (theValue === true || theValue === false)
                        eval("obj.style." + theProp + "=" + theValue);
                    else
                        eval("obj.style." + theProp + "='" + theValue + "'");
                }
            }
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="header"><a href="http://www.dfuns.idv.tw"><h1>CSSLayout | www.dfuns.idv.tw</h1></a></div>
            <div id="mainMenu">
                <ul>
                    <li id="about"><a href="http://www.dfuns.idv.tw/about/about.html">關於掌櫃</a></li>
                    <li id="design"><a href="http://www.dfuns.idv.tw/design/design.html">設計畫廊</a></li>
                    <li id="webDesign"><a href="http://www.dfuns.idv.tw/webDesign/webDesign.html">網頁動畫</a></li>
                    <li id="teach"><a href="http://www.dfuns.idv.tw/teach/teach.html">教學專區</a></li>
                    <li id="music"><a href="http://www.dfuns.idv.tw/music/music.html">音樂分享</a></li>
                    <li id="link"><a href="http://www.dfuns.idv.tw/link/link.html">好站連結</a></li>
                    <li id="contact"><a href="http://www.dfuns.idv.tw/contact/contact.html">聯絡掌櫃</a></li>
                </ul>
            </div>
            <div id="subMenu">
                <h1>DFUNS設計</h1>
                <ul>
                    <li id="dw"><a href="javascript:;">Dreamweaver</a></li>
                    <li id="fl"><a href="javascript:;">Flash</a></li>
                    <li id="fw"><a href="javascript:;">Fireworks</a></li>
                    <li id="ps"><a href="javascript:;">Photoshop</a></li>
                    <li id="ai"><a href="javascript:;">Illustrator</a></li>
                    <li id="ind"><a href="javascript:;">Indesign</a></li>
                    <li id="cdr"><a href="javascript:;">CorelDraw</a></li>
                    <li id="ufo"><a href="javascript:;">Photoimpact</a></li>
                    <li id="rif"><a href="javascript:;">Painter</a></li>
                </ul>
            </div>
            <div id="text">
                <ul>
                    <li onclick="MM_changeProp('content', '', 'fontSize', '1.5em', 'DIV')">大</li>
                    <li onclick="MM_changeProp('content', '', 'fontSize', '1.2em', 'DIV')">中</li>
                    <li onclick="MM_changeProp('content', '', 'fontSize', '1em', 'DIV')">小</li>
                </ul>
            </div>
            <div id="content">
                <h1>課程專區</h1>
                <h2>網站標準化設計實務養成 60 hr </h2>
                <p>網站要設計得好才能讓客戶透過各種搜尋引擎找到，除了以往的親和性、方便性之外，SEO（Search engine optimization，搜尋引擎最佳化）等概念漸漸受到認同。本課程將告訴你製作一個網站時，除了考量外觀，從設計，製作到上線，都需要以使用者為中心的觀點來思考，配合XHTML與CSS語法來完成最具效果的網站開發...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>Flash 互動網頁設計整合應用 45 hr </h2>
                <p>使用Flash的多媒體互動式網站是每一位網頁設計師所必須學習的重點方向，本課程將由淺入深地講解Adobe Flash在動畫、編撰程式、Web、多媒體等領域的應用。連原始素材都幫你準備好了，這一切都是要讓你能夠輕鬆地學會使用Adobe Flash...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>PHP資料庫網頁設計整合應用 45 hr </h2>
                <p> 目前的商業網站中，以Web Server的佔有率來看，目前Windows WEB Server佔了32.9%，而Apache WEB Server則佔了52.2%，原因在於一般中小型企業礙於預算的考量，會將網站架設在免費或是低廉的網站伺服器上，所以就必須去學習以及瞭解建構在Apache WEB Server上的PHP資料庫網頁，以迎合市場的需求...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>創意美術設計實務養成 60hr </h2>
                <p>創意來自於源源不絕的熱情！本課程將以創意設計的角度出發，深入說明點線面應用、影像處理技巧、影像合成技巧、企業識別設計、視覺符號設計、標誌設計、名片設計、色彩計畫、Layout設計、排版入門等等，讓你可以製作出屬於自己的設計作品...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>印前視覺設計整合應用 45hr </h2>
                <p>舉凡生活中食、衣、住、行、育、樂等，無一能與印刷脫得了關係，在本課程的安排中，你可以從學習了解海報設計、書籍雜誌封面設計、包裝設計，一直到品牌商品規劃與展場活動商品設計，由淺至深的實務案例，除了提升你的設計能力之外，還可以學習到商品印刷成形前的準備工作與注意事項...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>RPF 品牌形象設計整合應用 45hr </h2>
                <p>品牌所涵蓋的領域，包括產品、服務及企業文化。而本課程將帶領你以創新品牌的概念主軸設計出一系列的卡片、DM，並利用紙卡的概念延伸設計出T恤、紙袋、紙盒等各式各樣活潑的商品。透過課程中實際的開發、設計這些常見的商品，讓你可以更清楚的了解到品牌形象的設計始末及其衍生的整合與應用...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
                <h2>Painter數位繪圖設計班 54hr </h2>
                <p>「繪圖」並非一蹴可幾，但透過精心規劃的課程與極富教學經驗的知名畫家指導，卻可讓你站在繪圖設計的舞台最前端！本課程以創意為導向，並邀集多位國際知名漫畫家、插畫家、動畫與電玩原畫設計師傳授繪圖創作理論與技巧，藉由不同講師的講解與指導，你將可學會各式畫風與技巧...<a href="http://www.pcschool.com.tw/campus/index.aspx" target="_blank">more</a></p>
            </div>
            <div id="footer">
                <h1>CSS語法教學 │兩欄式排版│</h1>
                <p>DFUNS教學網範例 = <a href="http://www.dfuns.idv.tw">http://www.dfuns.idv.tw</a> =</p>
            </div>
        </div>
    </body>
</html>
